<template>
    <li v-for="(item, index) in datas" :key="item.id">
        <el-checkbox v-model="item.isChecked" size="large" />
        <span>{{ item.goodName }}</span>
        <el-button class="btn" @click="item.count = item.count > 1 ? item.count - 1 : 1">-</el-button>
        <el-input v-model="item.count" style="width: 35px" placeholder="Please Input" />
        <el-button class="btn" @click="item.count++">+</el-button>
        <span>{{ item.price }}</span>
        <span>{{ item.count * item.price }}</span>
        <el-button @click="del(index)">删除</el-button>
    </li>
</template>

<script setup>
import { ref } from 'vue'
import emitter from '../eventBus.js'
const datas = ref([])
// 接受datas数据
emitter.on('datasContent', (data) => {
    datas.value = data.value
})
// 删除单个商品
const del = (index) => {
    datas.value.splice(index, 1)
}
</script>

<style>
li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px 0;
}
</style>